<template>
  <div>
    <form-head @onSubmit="onSubmit" :is_change="is_change" :isEdit="is_show"/>
    <el-form ref="form" :rules="rules" :model="form" label-width="100px" class="form-width">
      <el-form-item label="商品名:" prop="title">
        <el-input v-model="form.title"  placeholder="请输入商品名" />
      </el-form-item>
      <el-form-item label="指定商品:" prop="goods_id">
        <el-select v-model="form.goods_id" filterable  placeholder="请选择指定商品">
          <el-option
            v-for="item in goods_options"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="类型:" prop="type" >
        <el-select v-model="form.type" placeholder="请选择类型">
          <el-option
            v-for="(item,i) in options"
            :key="i"
            :label="item"
            :value="i"
          />
        </el-select>
      </el-form-item>
      <!-- <el-form-item v-if="form.type === 1" label="秒杀分类:" prop="special_cate_id">
        <el-select v-model="form.special_cate_id" placeholder="请选择秒杀分类">
          <el-option
            v-for="item in special_cate"
            :key="item.id"
            :label="item.title"
            :value="item.id"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="封面图:" prop="thumb">
        <upload-pic :thumb="form.thumb" @update:thumb="form.thumb=$event" width="100"/>
      </el-form-item>
      <el-form-item label="限购次数:" prop="buy_number">
        <el-input v-model="form.buy_number"  placeholder="请输入限购次数(0为不限制)" />
      </el-form-item>
      <el-form-item label="展示价格:" prop="show_price">
        <el-input v-model="form.show_price"  placeholder="请输入展示价格" />
      </el-form-item>
      <el-form-item label="开始时间:" prop="start_time">
        <el-date-picker
          v-model="form.start_time"

          type="datetime"
          placeholder="选择开始日期时间"
          @change="onDateTimeChange()"
        />
      </el-form-item>
      <el-form-item label="结束时间:" prop="show_price">
        <el-date-picker
          v-model="form.end_time"
  
          type="datetime"
          placeholder="选择结束日期时间"
          @change="onDateTimeChange2()"
        />
      </el-form-item>
      <el-form-item label="销售价格:" prop="real_price">
        <el-input v-model="form.real_price"  placeholder="请输入请输入销售价格" />
      </el-form-item>
      <el-form-item label="介绍:" prop="description">
        <el-input v-model="form.description" placeholder="请输入介绍" />
      </el-form-item>
      <el-form-item label="总库存:" prop="total_stock">
        <el-input v-model="form.total_stock"  placeholder="请输入总库存" />
      </el-form-item>
      <el-form-item label="库存:" prop="stock">
        <el-input v-model="form.stock"  placeholder="请输入库存" />
      </el-form-item>
      <el-form-item label="已买:" prop="buy_stock">
        <el-input v-model="form.buy_stock"  placeholder="请输入已买数量" />
      </el-form-item>
      <el-form-item label="是否启用:" prop="status">
        <el-switch v-model="form.status" />
      </el-form-item>
      <el-form-item label="是否推荐:" prop="is_recommend">
        <el-switch v-model="form.is_recommend" />
      </el-form-item>
      <el-form-item label="详情:" prop="content">
        <rich-text ref="myQuillEditor" :content="form.content" @change="is_change=true" class="form-width-w"/>
      </el-form-item>
      
    </el-form>
  </div>
</template>

<script>
import richText from '../../../components/rich_text/rich_text'
export default {
  name: 'SpecialOfferForm',
  components: { richText },
  props: ['type','is_show'],
  computed:{
    editId(){
      return this.$store.state.user.editId
    },
    },
  data() {
    return {
      id:0,
      is_change: undefined,
      options: [],
      goods_options: [],
      special_cate: [],
      form: {},
      rules: {
        title: [
          { required: true, message: '请输入商品名', trigger: 'blur' }
        ],
        show_price: [
          { required: true, message: '请输入展示价格', trigger: 'blur' }
        ],
        real_price: [
          { required: true, message: '请输入销售价格', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '请输入介绍', trigger: 'blur' }
        ],
        total_stock: [
          { required: true, message: '请输入总库存', trigger: 'blur' }
        ],
        stock: [
          { required: true, message: '请输入库存', trigger: 'blur' }
        ],
        buy_stock: [
          { required: true, message: '请输入已买数量', trigger: 'blur' }
        ],
        goods_id: [
          { required: true, message: '请选择指定商品', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    if(this.is_show){
      this.id=this.editId
    }else{
      this.id = (this.$route.params && this.$route.params.id)||0
      this.$setTagsViewTitle(this.id)
    }
    console.log(this.type)
    if(this.type==undefined){
      this.type=this.$store.state.type
    }
    console.log(this.type)
    this.init_into()
  },
  methods: {
    // 时间转换
    onDateTimeChange() {
      var dateee = new Date(this.form.start_time).toJSON()
      const new_time = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
      this.form.start_time = new_time
    },
    onDateTimeChange2() {
      var dateee = new Date(this.form.end_time).toJSON()
      const new_time = new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
      this.form.end_time = new_time
    },
    // 选择图片
    // 提交
    onSubmit(formName) {
      const form = this.form
      console.log(form)
      form.content = this.$refs.myQuillEditor.editor_content
      this.$refs[formName].validate(valid => {
        if (valid) {
          form.id = this.id
          form.status === true ? form.status = 1 : form.status = 0
          form.is_recommend === true ? form.is_recommend = 1 : form.is_recommend = 0
          this.get('/shop/GoodsSpecial/save', form, 'POST').then(e => {
            this.$msg_ok('success', '操作成功')
            
            if(this.is_show){
              this.$store.commit('user/SET_EDIT','')

            }else{
              this.$back()
            }
              
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
      this.$store.state.editId = ''
      this.$store.state.type= ''
      console.log('submit!')
    },
    // 获取当前数据
    init_into() {
      this.get('/shop/GoodsSpecial/info?id=' + this.id, 'POST').then(e => {
        this.goods_options = e.goods
        this.special_cate = e.cate
        this.options = e.type_arr
        if(this.id>0){
          const tpl = e.info.tpl
          this.form = tpl
          this.form.status =this.form.status== 1
          this.form.is_recommend = this.form.is_recommend == 1
          this.$refs.myQuillEditor.editor_content = tpl.content
          if(this.form.goods_id==0){
            this.form.goods_id=''
          }
          if(this.form.real_price==0){
            this.form.real_price=''
          }

        }else{
          this.form.type=this.type
        }
        setTimeout(()=>{this.is_change=false},100)
      })
    },
    //
    onEditorReady(editor) {
    }
  },
  watch: {
    form:{
      handler (val, oldVal) {
	      if(this.is_change!=undefined)
        	this.is_change=true
      },
      deep:true
    }
  }
}
</script>

<style>
.layout-all {
  margin: 10px;
}
.spces_div{
  border:1px solid #DCDFE6;
  height: 100%;
  width: 30%;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
}
</style>
